<template>
    <el-form :model="form" label-width="auto" style="width: 1200px;">
        <div style="display: flex; align-items: center; flex-wrap: wrap;">
            <el-form-item label="操作模块：" style="flex: 1;">
                <el-input v-model="form.operation" />
            </el-form-item>
            <el-form-item label="操作详情：" style="flex: 1;">
                <el-input v-model="form.content" />
            </el-form-item>
            <el-form-item style="flex: 0 0 auto;">
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
            <el-form-item style="flex: 0 0 auto;">
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
            <el-form-item style="flex: 0 0 auto;">
                <el-text style="font-size: 18px;color:cornflowerblue;" @click="dian">{{ form.isno ? '收起∨' : '展开∧' }}</el-text>
            </el-form-item>
        </div>
    </el-form>

    <div v-show="form.isno">
        <el-form :model="form" label-width="auto" style="max-width: 600px; margin-top: 20px;">
            <el-form-item label="操作员：">
                <el-input v-model="form.loginname" />
            </el-form-item>
            <el-form-item label="操作IP：">
                <el-input v-model="form.client_ip" />
            </el-form-item>
        </el-form>
    </div>
    <el-table :data="tableData" >
    <el-table-column prop="customLogId" label="#"  />
    <el-table-column prop="operation" label="操作模块"  />
    <el-table-column prop="content" label="操作详情" />
    <el-table-column prop="loginname" label="操作员账号" />
    <el-table-column prop="loginname" label="操作姓名" />
    <el-table-column prop="client_ip" label="操作IP" />
    <el-table-column prop="create_time" label="操作时间" />
  </el-table>
  <el-pagination
      v-model:current-page="form.pageIndex"
      v-model:page-size="form.pageSize"
      :page-sizes="[100, 200, 300, 400]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="form.pagetotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
</template>
<script lang="ts" setup>
import {LogList} from '@/api/loglists/index'
import {type LogData} from '@/api/loglists/type'
    import { reactive, ref,onMounted } from 'vue'
    import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
    import { useRouter, useRoute } from 'vue-router'
    import axios from 'axios'
    const route = useRoute()
    const router = useRouter()
const form=ref<LogData>({
    operation:'',
    content:'',
    create_timestart:'',
    create_timeend:'',
    loginname:'',
    client_ip:'',
    pageIndex:1,
    pageSize:10,
    isno:false,
    pagetotal:0,
    pagecount:0
})
onMounted(()=>{
    getData()
  
    
})
const dian=()=>{
    form.value.isno=!form.value.isno;
}
const onSubmit=()=>{
    getData()
    console.log(form.value.create_timestart);
}
const tableData=ref([])
const resetForm=ref({

})
const getData=async()=>{
    await LogList(form.value).then(function(res){
        console.log(res.data.data);
        tableData.value=res.data.data
        form.value.pagetotal=res.data.pageTotal
        form.value.pagecount=res.data.pageCount
    })
}
const handleSizeChange = (val: number) => {
  form.value.pageSize=val;
  getData()
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  form.value.pageIndex=val
  getData()
}
</script>